<template>
  <div>
    <!-- 上卡片 -->
    <el-card>
      <el-form label-width="100px" style="max-width: 460px" inline>
        <el-form-item label="职位搜索">
          <el-input v-model="keyword" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="keyword === ''" @click="searchRole">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 下卡片 -->
    <el-card>
      <el-button v-has="'btn.Role.assgin'" type="primary" @click="addRole"> 添加职位 </el-button>

      <!-- 表格  -->
      <el-table :data="roleTable" style="width: 100%; margin: 20px">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="roleName" label="职位名称" width="180" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button v-has="'btn.Role.assgin'" type="primary" size="small" @click="asignRole(row)"> 分配权限 </el-button>
            <el-button v-has="'btn.Role.update'" type="primary" size="small" @click="edit(row)"> 编辑 </el-button>
            <el-button v-has="'btn.Role.remove'" type="danger" size="small" @click="deleteRole(row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器  -->
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 7, 9]" :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="getRoleTable" />
    </el-card>

    <div>
      <AssignRole ref="assign_role_ref"></AssignRole>
    </div>
    <div>
      <AddOrUpdate ref="add_ref" :type="type"></AddOrUpdate>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref } from 'vue'
import { reqAllRoleList, reqRemoveRole } from '@/utils/api/acl/role/index'
import type { RoleData } from '@/utils/api/acl/role/type'

const AssignRole = defineAsyncComponent(() => import('./AssignRole.vue'))
const AddOrUpdate = defineAsyncComponent(() => import('./AddOrUpdate.vue'))

// 搜索框
const keyword = ref<string>('')

// 分页器
const currentPage = ref(4)
const pageSize = ref(5)
const total = ref<number>(0)
// 表格数据
const roleTable = ref<RoleData[]>([])
// 对话框ref
const assign_role_ref = ref()
// 添加或修改职位ref
const add_ref = ref()
// 是添加职位还是修改职位
const type = ref<string>('add')

onMounted(() => {
  getRoleTable()
})

// 获取表格数据
const getRoleTable = async (page = 1) => {
  currentPage.value = page
  const res = await reqAllRoleList(currentPage.value, pageSize.value, keyword.value)
  if (res.data.code == 200) {
    roleTable.value = res.data.data.records
    total.value = res.data.data.total
  }
}

// 分页器每页展示的条数改变
const handleSizeChange = (size: number) => {
  pageSize.value = size
  getRoleTable(currentPage.value)
}

// 搜索
const searchRole = () => {
  getRoleTable(currentPage.value)
}

// 分配权限
const asignRole = (row: RoleData) => {
  assign_role_ref.value.changeShow(row)
}

// 添加职位
const addRole = () => {
  type.value = 'add'
  add_ref.value.changeShow()
}

// 编辑按钮
const edit = (row: RoleData) => {
  type.value = 'edit'
  add_ref.value.changeShow(row)
}

// 删除按钮
const deleteRole = async (row: RoleData) => {
  const res = await reqRemoveRole(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('删除成功')
    getRoleTable(currentPage.value)
  }
}

defineExpose({ getRoleTable, currentPage })
</script>

<style scoped></style>
